<template>
	<div class="exchange-wrap">
		<div class="title-box">
			<div class="title1">
				Hi,我的爱车在<em>车享家</em>做保养
			</div>
			<div class="title2">
				推荐你也来试试
			</div>
		</div>
		<div class="cpn-box">
			<div class="title">
				请选取适合你的新人礼券
			</div>
			<div class="cpn-list">
				<div class="cpn-item" v-for="(cpn, index) in cpnList">
					<div class="left">
						<span class="price"><em class="price-text">{{ cpn.faceValue }}</em><em class="price-danwei">元</em></span>
					</div>
					<div class="center">
						<div class="content ellipsis3" style="-webkit-box-orient: vertical;">
							{{ cpn.activityName }}
						</div>
					</div>
					<div class="right">
						<div class="btn" :ca="'推荐有礼_车享家新人礼券$领取'+cpn.activityName" @click="showRegistBox(index)">领取</div>
					</div>
				</div>
			</div>
		</div>
		<div class="regist-box" :class="{'slideUp': showRegistBoxStatus ===1, 'slideDown': showRegistBoxStatus === 2}" v-show="showRegistBoxStatus === 1" style="display: none;">
			<div class="close" ca="推荐有礼_车享家新人礼券$关闭"  @click="hideRegistBox()">＋</div>
			<div class="title">
				填写手机号领取礼券
			</div>
			<form class="content">
				<input type="text" id="mobile" v-model="mobile" class="mobile" placeholder="填写手机号领取礼券" maxlength="11" />
				<div class="code-box">
					<input type="text" id="code" v-model="code" class="code" placeholder="填写验证码" maxlength="6"/>
					<div class="btn-code" @click="sendSmsCode" ca="推荐有礼_车享家新人礼券$获取验证码">
						<timer-btn :second="60" :btntext="btnSmstText" ref="timerBtn"></timer-btn>
					</div>
				</div>
				<input type="button" class="btn" value="立即领取" ca="推荐有礼_车享家新人礼券$立即领取" @click="exchangeCpnAction">
			</form>
			<p class="agreement">
				<span>未注册号验证后自动创建车享账号<br/>领取表示同意</span>
				<a href="https://cxjapp.chexiang.com/html/memberAgreement.html" ca="推荐有礼_车享家新人礼券$用户协议及隐私权声明">《用户协议及隐私权声明》</a>
			</p>
		</div>
		<div class="logo"></div>
		<div class="mask" v-if="showMask" @click="hideRegistBox()"></div>
	</div>
</template>

<script>
	import common from '../../../assets/js/common';
	import Vue from 'vue';
	import Url from 'url';
	import QueryString from 'query-string';
	import {Toast, MessageBox} from 'mint-ui';
	import timerBtn from '../../common/timeBtn';
	export default{
		data (){
			return {
				showRegistBoxStatus: 2,
				showMask: false,
				cpnList: [],
				cpnCode:'',
				prizeCode:'',
				btnSmstText: '获取验证码',
				mobile:'',
				code:'',
				shareUid:'',
				initSignUrl:process.env.NODE_ENV == 'sit' ? common.isEnv("//recruit") : common.isEnv("//wx"),
				showMemProtolFlag: false,
				locationObj: {
					"latitude": "",
					"longitude": "",
					"cityName": ""
				},
				globalActionFlag: true //防止重复点击 false不可点击  true可点击
			};
		},
		components: {timerBtn},
		created (){
			var _this = this;
			/*var hrefUrl = window.location.href;
	    	var urlObj = Url.parse(hrefUrl);
	    	var queryObj = QueryString.parse(urlObj.query);
	    	//分享人uid
	    	_this.shareUid = queryObj.shareUid;*/
	    	
	    	//分享人uid QueryString 模块会把 + 变成空白符
	    	_this.shareUid = _this.getQueryString("shareUid");
	    	
	    	console.log("shareUid", _this.shareUid);
            /*var shareObj = {
              friend:{
                shareTitle:" 老带新活动标题！",
                descContent:"老带新活动描述标题",
                imgUrl:"https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/service/list1.jpg?v=1",
                lineLink: hrefUrl
              },
              friendQuan:{
                shareTitle:"老带新活动标题！",
                imgUrl:"https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/service/list1.jpg?v=1",
                lineLink: hrefUrl
              }
            }*/
            /*common.initWxShare(_this, this.initSignUrl, shareObj, 1);
			wx.ready(function () {
				wx.getLocation({
			      success: function (res) {
			      	Toast("获取定位成功哈哈！");
			      	var latitude = res.latitude;
			      	var longitude = re.longitude;
			      	_this.locationObj= {
						"latitude": latitude,
						"longitude": longitude					
			      	};
			       //_this.getCpnList();
			       //alert(JSON.stringify(res));  
			      },  
			      cancel: function (res) {  
			        //alert('用户拒绝授权获取地理位置');  
			      }  
			    });  
			});*/
			_this.getCpnList();
		},
		mounted (){
			var _this = this;
			//打点
    		_this.$nextTick(function () {
    			common.ANA_AnalyticsScan();
    		});
		},
		methods: {
			showRegistBox: function (index) {
				var _this = this;
				_this.cpnCode = _this.cpnList[index].activityCode;
				_this.prizeCode = _this.cpnList[index].prizeCode;
				_this.showRegistBoxStatus = 1;
				_this.showMask = true;
			},
			hideRegistBox: function () {
				var _this = this;
				_this.showRegistBoxStatus = 2;
				_this.showMask = false;
			},
			//获取新用户券列表
			getCpnList: function () {
				var _this = this;
				var paramObj = {
					"cityName": _this.locationObj.cityName, 
					"latitude": _this.locationObj.latitude, 
					"longitude":  _this.locationObj.longitude
				};
				_this.$http.get(common.isdev() + "/guide/getExchangeCouponList4NewUser/0.htm", paramObj).then(function (res) {
	              	if (res.data.result == 1) {
	              		_this.cpnList = res.data.obj;
	              		//打点
			    		_this.$nextTick(function () {
			    			common.ANA_AnalyticsScan();
			    		});
	              	}
	           }, function (err) {
	      			Toast("系统繁忙，请稍后再试");
	            });
			},
			testMobile: function () {
				var _this = this;
				var mobileRegx = /^1[3|4|5|7|8][0-9]{9}$/;
				var mobile = _this.mobile.trim();
		        if (mobileRegx.test(mobile)) {
		        	return true;
		        }else { 
		        	return false;
		        };
			},
			testCode: function () {
				var _this = this;
				var codeRegx = /^[0-9]{6}$/;
				var code = _this.code.trim();
		        if (codeRegx.test(code)) {
		        	return true;
		        }else { 
		        	return false;
		        };
			},
			sendSmsCode: function () {
				var _this = this;
				if (!_this.testMobile()) {
					Toast("请输入正确的手机号！");
					return ;
				}
				var paramObj =  {
	    			'mobile': _this.mobile,
	    			"userId": _this.shareUid
	    		};
				//_this.$refs.timerBtn.send();
				_this.$http.post(common.isdev() + '/guide/sendSmsCode/1.htm', paramObj).then(function (res) {
			        var someData = res.data;
			        if(someData.result == 1) {
			        	_this.$refs.timerBtn.send();
			          	Toast("验证码发送成功！");
			        } else {
			        	//Toast(res.data.msg);
			        	//_this.$refs.timerBtn.send();
			        	var errorCode = res.data.errorCode ;
						if (errorCode == 1007) {
							Toast("抱歉~你已领取过了,不能重复领取!");
						} else if (errorCode == 1013){
							Toast("呃~无法领取自己发放的礼包！");
						} else if (errorCode == 1014)  {
							Toast("抱歉~您已经是注册用户无法领取该礼包！");
						} else  {
							Toast("验证码发送失败！");
						}
			        }
			    }, function (res) {
			    	Toast("验证码发送失败！");
			    });
			},
			exchangeCpnAction: function (index) {
				
				var _this = this;
				if (!_this.testMobile()) {
					Toast("请输入正确的手机号！");
					return ;
				}
				if (!_this.testCode()) {
					Toast("请输入正确的验证码！");
					return ;
				}
				var paramObj = {
					"activityCode": _this.cpnCode,
					"prizeCode": _this.prizeCode,
					"mobile": _this.mobile.trim(),
					"captcha": _this.code.trim(),
					"userId": _this.shareUid
				};
				
				if (!_this.globalActionFlag) {
	            	return;
	            }
	            _this.globalActionFlag = false;
				_this.$http.post(common.isdev() + "/guide/exchangeCoupon4NewUser/0.htm", paramObj).then(function (res) {
					if (res.data.result == 1 ) {
						window.location.href = (common.isHtml() == "shtml" ? "/cx/cxj/cxjweb": "") + "/invitefriends2/download/invitefriends2-download."+common.isHtml();
					}else {
						var errorCode = res.data.errorCode ;
						if (errorCode == 1005) {
							Toast("账号已存在!");
						} else if (errorCode == 1006){
							Toast("验证码错误！");
						} else if (errorCode == 1011)  {
							Toast("抱歉,兑换失败！");
						} else  {
							Toast("抱歉,兑换失败！");
						}
						//Toast(res.data.msg);
					}
					_this.globalActionFlag = true;
				}, function (res) {
					_this.globalActionFlag = true;
					Toast("抱歉,兑换失败！");
				});
			},
			getQueryString: function (name) {
			    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
			    var r = window.location.search.substr(1).match(reg);
			    if (r != null) {
			        return unescape(r[2]);
			    }
			    return null;
			}
		}
	}
</script>
<style lang="scss">
	@import "../../../assets/css/reset.scss";
	@import "../../../assets/css/common.scss";
	html, body {
	height: 100%;
	}
	.exchange-wrap {
		height: 100%;
		position: relative;
		background: #f2f9f3 url(../../../assets/image/invitefriends2/share/index-bg.png) center top no-repeat;
		background-size: 100% 100%;
		.title-box {
			text-align: center;
			padding-top: 4.8rem;
			.title1 {
				height: 2.9rem;
				line-height: 2.9rem;
				font-size:2.1rem;
				color: #ffffff;
				em {
					color: #ffff0b;
				}
			}
			.title2 {
				height: 6.2rem;
				line-height: 6.2rem;
				font-size:4.4rem;
				color:#ffffff;
			}
		}
		.cpn-box {
			margin: 0 3rem;
			margin-top: 3.7rem;
			.title {
				height: 2.4rem;
				line-height: 2.4rem;
				text-align: center;
				font-size:1.7rem;
				color:#ffff0b;
			}
			.cpn-list {
				margin-top: 0.6rem;
				padding: 1rem;
				width: 100%;
				background: #106adc;
				.cpn-item {
					width: 100%;
					height: 6rem;
					margin-top: 1rem;
					background: transparent url(../../../assets/image/invitefriends2/share/cpn-item.png) center center no-repeat;
					background-size: contain;
					&:nth-of-type(1) {
						margin-top: 0;
					}
					.left {
						float: left;
						width: 8.6rem;
						height: 6rem;
						line-height: 6rem;
						text-align: center;
						.price {
							color:#f12626;
							.price-text {
								font-size:3.2rem;
								font-weight: 800;
							}
							.price-danwei {
								font-size: 1.2rem;
							}
						}
					}
					.center {
						position: relative;
						float: left;
						height: 6rem;
						width: 12.7rem;
						text-align: left;
						font-size: 1.5rem;
						color: #262f34;
						.content {
							width: 100%;
							max-height: 4rem;
							line-height: 1.8rem;
							padding-left: 0.9rem;
							padding-right: 0.5rem;
							position: absolute;
							top: 50%;
							left: 0;
							transform: translate(0, -50%);
	            			-webkit-transform: translate(0, -50%);
						}
					}
					.right {
						float: left;
						height: 7rem;
						.btn {
							margin-top: 1.5rem;
							width: 6.3rem;
							height: 3rem;
							line-height: 3rem;
							border-radius: 0.4rem;
							background:#f12626;
							text-align: center;
							font-size: 1.3rem;
							color: #ffffff;
						}
					}
					&:after {
						clear: both;
						display: block;
						content: '';
						height: 0;
						overflow: hidden;
					}
				}
			}
		}
		.regist-box {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 2;
			// transform: translate(0,100%);
			// -webkit-transform: translate(0,100%);
			display:none;
			width: 100%;
			background: #ffffff;
			.close {
				position: absolute;
			    top: 0.6rem;
    			right: 0.7rem;
				transform:rotate(-45deg);
				-webkit-transform:rotate(-45deg);
				text-align: center;
				font-size: 2.8rem;
				color: #b0b6b9;
			}
			.title {
				height: 5.6rem;
				line-height: 5.6rem;
				border-bottom: 1px solid #d2d5d7;
				padding-left: 1.4rem;
				font-size: 1.5rem;
				color: #2d2d2d;
			}
			.content {
				display: block;
				padding: 2.3rem 2rem 1.8rem 2rem;
				.mobile {
					width: 100%;
					height: 4.6rem;
					line-height: 4.6rem;
					border: 1px solid #d9d9d9;
					border-radius: 0.4rem;
					padding-left: 1.5rem;
					background:#f9fcff;
					font-size:1.6rem;
					color: #262f34;
				}
				.code-box {
					position: relative;
					margin-top: 1rem;
					.code {
						width: 100%;
						height: 4.6rem;
						line-height: 4.6rem;
						border: 1px solid #d9d9d9;
						border-radius: 0.4rem;
						padding-left: 1.5rem;
						background:#f9fcff;
						font-size:1.6rem;
						color: #262f34;
					}
					.btn-code {
						position: absolute;
						top: 0;
						right: 0;
						width: 11.9rem;
						height: 4.6rem;
						border-top-right-radius: 0.4rem;
						border-bottom-right-radius: 0.4rem;
						overflow: hidden;
						button {
							border: 0;
							display: block;
							width: 100%;
							height: 100%;
							line-height: 4.6rem;
							background:#0084ff;
							text-align: center;
							font-size: 1.6rem;
							color: #ffffff;
						}
						.codegray {
							background: #cccccc;
						}
					}
				}
				.btn {
					border: none;
					margin-top: 3rem;
					width: 100%;
					height: 4.6rem;
					border-radius: 0.4rem;
					background: #0084ff;
					font-size: 1.7rem;
					color: #ffffff;
				}
				
			}
			.agreement {
				padding-bottom: 1.8rem;
				font-size:1.1rem;
				color:#919191;
				text-align:center;
				a {
					color: #0084ff;
				}
			}
		}
		.logo {
			margin: 0 auto;
			margin-top: 3.4rem;
			width: 9.4rem;
			height: 3.6rem;
			background: transparent url(../../../assets/image/invitefriends2/share/logo-cxj.png) center center no-repeat;
			background-size: contain;
		}
		.cpn-list {
			padding: 1.3rem 1.5rem 1.7rem;
			width: 100%;
			.cpn-item {
				width: 100%;
				background: transparent url(../../../assets/image/invitefriends2/exchange/cpn-item.png) center center no-repeat;
				background-size: contain;
			}
		}
		.mask {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.7);
		}
		.slideUp{
	        animation: slideUp 400ms ease-in forwards;
	        -webkit-animation: slideUp 400ms ease-in forwards;
	        display:block;
	    }
	    @-webkit-keyframes slideUp {
	        0%{
	            transform: translateX(0) translateY(100%);
	            -webkit-transform: translateX(0) translateY(100%);
	        }
	        100%{
	            transform: translateX(0) translateY(0);
	            -webkit-transform: translateX(0) translateY(0);
	        }
	    }
	    @keyframes slideUp {
	        0%{
	            transform: translateX(0) translateY(100%);
	            -webkit-transform: translateX(0) translateY(100%);
	        }
	        100%{
	            transform: translateX(0) translateY(0);
	            -webkit-transform: translateX(0) translateY(0);
	        }
	    }
	    .slideDown{
	        animation: slideDown 400ms ease-in forwards;
	        -webkit-animation: slideDown 400ms ease-in forwards;
	        display:none;
	    }
	    @-webkit-keyframes slideDown {
	        0%{
	            transform: translateX(0) translateY(0);
	            -webkit-transform: translateX(0) translateY(0);
	        }
	        100%{
	            transform: translateX(0) translateY(100%);
	            -webkit-transform: translateX(0) translateY(100%);
	        }
	    }
	    @keyframes slideDown {
	        0%{
	            transform: translateX(0) translateY(0);
	            -webkit-transform: translateX(0) translateY(0);
	        }
	        100%{
	            transform: translateX(0) translateY(100%);
	            -webkit-transform: translateX(0) translateY(100%);
	        }
	    }
	}
	.ellipsis {
		white-space: nowrap;  
        overflow: hidden;  
        text-overflow: ellipsis;  
	}
	
	.ellipsis3 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.mint-toast {
		z-index: 1000 !important;
	}
	
</style>
